<style scoped>
.wraper {
    padding: 0 30px;
}
.search {
    padding-bottom: 20px;
}
.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}
.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}
.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}
.detail {
    border-top: 1px dashed #cccccc;
}
.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}
.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}
.iconfont {
    font-size: 14px;
}
.red-font {
    color: #ff1f1f;
}
h2 {
    font-size: 16px;
    margin-bottom: 20px;
    display: inline-block;
}
.wrap {
    padding: 30px;
    padding-bottom: 0;
    clear: both;
    border-bottom: 1px solid #dddee1;
    position: relative;
}
.formdiv {
    clear: both;
    margin-bottom: 20px;
}
.mt20 {
    margin-top: 20px;
}
.mb20 {
    margin-bottom: 20px;
}
.line {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 1px;
    border-bottom: 1px dotted #dddee1;
}
.openinfo{
    text-align: center;
}
.openinfobtn{
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #4074e1;
    color:#fff;
    cursor: pointer;
}
.baseinfo{
    position: relative;
    padding-right: 50px;
}
.head-icon{
    position: absolute;
    right: 50px;
    top: 0;
    width: 100px;
    height: 100px;
    text-align: center;
}
.bm-view {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}
.cropper-wrapper {
    margin-top: 10px;
	height: 400px;
}
.cropper-box{
    height: 300px;
}
.btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c0ccda;
        color: #1f2d3d;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin:20px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
}
</style>

<style>
.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    line-height: 0;
}

.clearfix {
    zoom: 1;
}
</style>

<template>
    <div class="customer-edit">
        <product-title></product-title>
        <div class="wrap">
            <h2>
                基本信息
            </h2>
            <Form class="baseinfo clearfix" :model="customer" :ref="customer" :rules="ruleValidate" :label-width="120">
                <Row>
                    <Col span="4">
                        <Form-item label="姓名：" required>
                            <Input v-model="customer.true_name"  placeholder="请输入客户姓名"></Input>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="身份证号：">
                            <Input v-model="customer.id_card" @on-change="idcardchange($event)"  placeholder="请输入身份证号"></Input>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="生日：" required>
                            <DatePicker v-model="customer.solar" type="date" @on-change="signDateChange($event)"  format="yyyy-MM-dd"  placeholder="选择日期"></DatePicker>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="性别：" required>
                            <Select v-model="customer.sex" placeholder="请选择性别">
                                <Option value="1">男</Option>
                                <Option value="2">女</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="类型：" required>
                            <Select v-model="customer.type" placeholder="请选择客户类型">
                                <Option value="0">准客户</Option>
                                <Option value="1">签单客户</Option>
                            </Select>
                        </Form-item>
                    </Col>    
                    <Col span="4">
                        <Form-item label="手机号：" required>
                            <Input v-model="customer.mobile"  placeholder="请输入手机号"></Input>
                        </Form-item>
                    </Col>
                    
                    <Col span="5">
                        <Form-item label="客户来源：" required>
                            <Select v-model="customer.user_from" placeholder="请选择客户来源">
                                <Option value="签单客户">签单客户</Option>
                                <Option value="缘故">缘故</Option>
                                <Option value="转介绍">转介绍</Option>
                                <Option value="孤儿单客户">孤儿单客户</Option>
                                <Option value="陌生拜访">陌生拜访</Option>
                            </Select>
                        </Form-item>                       
                    </Col>
                    <Col span="5">
                        <Form-item label="职业：">
                            <Select v-model="customer.profession" placeholder="请选择职业">
                                <Option value="销售业务人员">销售业务人员</Option>
                                <Option value="一般行政人员">一般行政人员</Option>
                                <Option value="专业人士">专业人士</Option>
                                <Option value="作业员">作业员</Option>
                                <Option value="负责人及管理人员">负责人及管理人员</Option>
                                <Option value="家庭主妇">家庭主妇</Option>
                                <Option value="军人、公务员">军人、公务员</Option>
                                <Option value="教师">教师</Option>
                                <Option value="学生">学生</Option>
                                <Option value="退休人员">退休人员</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="昵称：">
                            <Input v-model="customer.nick_name" placeholder="请输入昵称"></Input>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="年收入：">
                            <Input v-model="customer.annual_income"  placeholder="请输入年收入"></Input>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="负债：">
                            <Input v-model="customer.debt" placeholder="请输入负债"></Input>
                        </Form-item>
                    </Col>                                       
                    <Col span="5">
                        <Form-item label="QQ">
                            <Input v-model="customer.qq" placeholder="请输入QQ"></Input>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="Email：">
                            <Input v-model="customer.email" placeholder="请输入Email"></Input>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="微信：">
                            <Input v-model="customer.weixin" placeholder="请输入微信"></Input>
                        </Form-item>
                    </Col>
                    
                    <Col span="4">
                        <Form-item label="婚姻状况：">
                            <Select v-model="customer.marriage" placeholder="请选择婚姻状况">
                                <Option value="单身">单身</Option>
                                <Option value="已婚（无子女）">已婚（无子女）</Option>
                                <Option value="已婚（有子女）">已婚（有子女）</Option>
                            </Select>
                        </Form-item>
                    </Col> 
                </Row>
                <div class="head-icon" @click="openModal()">
                    <img v-show="!nohead" :src="customer.avator" width="70" height="70" />
                    <Icon v-show="nohead" size="70" color="#dddee1" type="plus-circled"></Icon>
                    <Button type="primary" shape="circle">上传头像</Button>
                </div>
            </Form>
            
            <div class="openinfo" v-show="!showinfo">
                <span class="openinfobtn" @click="openinfobtn()">完善更多内容>></span>
            </div>
        </div>
        <!-- 投保人 -->
        <div class="wrap" v-show="showinfo">
            <h2>
                详细信息
            </h2>
            <Form class="clearfix"  :ref="policyDetail.applicant" :rules="ruleValidate" :label-width="140">
                <Row>
                    <Col span="4">
                        <Form-item label="认识年限：">
                            <Select v-model="customer.known_years" placeholder="请选择认识年限">                                                               
                                <Option value="2年以内">2年以内</Option>
                                <Option value="2-5年">2-5年</Option>
                                <Option value="5年以上">5年以上</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="禁忌：">
                            <Input v-model="customer.taboo"  placeholder="请输入禁忌"></Input>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="接近程度：">
                           <Select v-model="customer.access_level" placeholder="请选择接近程度">
                                <Option value="相当容易">相当容易</Option>
                                <Option value="容易">容易</Option>
                                <Option value="困难">困难</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="非工作日空闲时间：">
                            <Input v-model="customer.week_free_time" placeholder="请输入非工作日空闲时间"></Input>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="工作日空闲时间：">
                            <Input v-model="customer.day_free_time" placeholder="请输入工作日空闲时间"></Input>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="交往程度：">
                            <Select v-model="customer.associate_level" placeholder="请选择交往程度">
                                <Option value="点头之交">点头之交</Option>
                                <Option value="普通朋友">普通朋友</Option>
                                <Option value="密友">密友</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="兴趣爱好：">
                            <Input v-model="customer.hobby" placeholder="请输入兴趣爱好"></Input>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="学历：">
                           <Select v-model="customer.education" placeholder="请选择学历">
                                <Option value="小学以下">小学以下</Option>
                                <Option value="小学">小学</Option>
                                <Option value="初中">初中</Option>
                                <Option value="高中">高中</Option>
                                <Option value="中专">中专</Option>
                                <Option value="大专">大专</Option>
                                <Option value="本科">本科</Option>
                                <Option value="硕士">硕士</Option>
                                <Option value="博士">博士</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="4" offset="1">
                        <Form-item label="真实生日类型：">
                           <Select v-model="customer.birthday_type" placeholder="请选择真实生日类型">
                                <Option value="0">阴历</Option>
                                <Option value="1">阳历</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="5">
                        <Form-item label="真实生日：">
                            <DatePicker v-model="customer.true_birthday_obj" type="date" @on-change="inceptionDateChange($event)"  format="yyyy-MM-dd"  placeholder="选择日期"></DatePicker>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="推荐能力：">
                           <Select v-model="customer.rec_ability" placeholder="请选择推荐能力">
                                <Option value="好">好</Option>
                                <Option value="还好">还好</Option>
                                <Option value="很好">很好</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="4">
                        <Form-item label="见面次数：">
                           <Select v-model="customer.see_times" placeholder="请选择见面次数">
                                <Option value="1-2次">1-2次</Option>
                                <Option value="3-5次">3-5次</Option>
                                <Option value="5次以上">5次以上</Option>
                            </Select>
                        </Form-item>
                    </Col>
                    <Col span="16">
                        <Form-item>
                            <Checkbox :true-value="checkboxture" :false-value="checkboxfalse" v-model="customer.may_cover">可能加保</Checkbox>
                            <Checkbox :true-value="checkboxture" :false-value="checkboxfalse" v-model="customer.may_add_staff">可能增员</Checkbox>
                            <Checkbox :true-value="checkboxture" :false-value="checkboxfalse" v-model="customer.attend_conference">是否参加产说会</Checkbox>
                            <Checkbox :true-value="checkboxture" :false-value="checkboxfalse" v-model="customer.receive_plan">是否收过计划书</Checkbox>
                            <Checkbox :true-value="checkboxture" :false-value="checkboxfalse" v-model="customer.receive_gift">是否收到过礼物</Checkbox>
                        </Form-item>
                    </Col>                    
                </Row>
                <div class="line clearfix">
                </div>
                <Row>
                    <Col span="9">
                        <Form-item label="公司地址：">
                            <Input v-model="customer.company_address" placeholder="请输入公司地址"></Input>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="9">
                        <Form-item label="省市区：">
                            <Cascader :data="area_data" v-model="customer.area" :value="customer.area" trigger="hover" @on-change="areaChange" placeholder="请输入所属地区"></Cascader>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="9">
                        <Form-item label="家庭地址：">
                            <Input v-model="customer.home_address"  placeholder="请输入家庭详细地址">
                                <Button slot="append" @click="addressChange()">在地图中定位</Button>
                            </Input>
                        </Form-item>
                    </Col>                    
                </Row>
                <Row>
                    <Col span="9">
                        <Form-item label="家庭坐标：">
                            <Input v-model="customer.home_l" placeholder="请输入家庭坐标"></Input>
                        </Form-item>
                    </Col>
                </Row>  
                <baidu-map v-if="showMap" @click="mapclick($event)" class="bm-view" :center="center" :scroll-wheel-zoom=true zoom="15" ak="8PuukfqnhGv9tZM6HiKrfDdjgsX7c8tD" @ready="baiduHandler"> 
                </baidu-map>            
            </Form>
            <div class="openinfo">
                <span class="openinfobtn" @click="closeinfo()">收起完善更多>></span>
            </div>
        </div>

        <Row class="mt20 mb20">
            <Col span="6" offset="8">
            <Button type="primary" @click="handleSubmit()">提交</Button>
            </Col>
        </Row>
        
        <Modal v-model="modal2" width="1200" ok-text="上传图片" :loading="loading" @on-ok="uploadHeadimg">
            <Row class="cropper-wrapper">
                <Col span="11" class="cropper-box">
                    <vueCropper
                        ref="cropper"
                        :img="headImg.img"
                        :outputSize="headImg.size"
                        :outputType="headImg.outputType"
                        :info="headImg.info"
                        :canScale="headImg.canScale"
                        :autoCrop="headImg.autoCrop"
                        :autoCropWidth="headImg.width"
                        :autoCropHeight="headImg.height"
                        :fixed="headImg.fixed"
                        :fixedNumber="headImg.fixedNumber"
                        @realTime="realTime"
                    ></vueCropper>
                    <label class="btn" for="upload2">打开图片</label>
                    <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
                    <!-- <button @click="finish2('base64')" class="btn">裁剪</button> -->
                </Col>
                <Col span="7" offset="1">
                    <!-- <img :src="formItem.headImg.demoimg" /> -->
                    <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
                        <div :style="previews.div">
                            <img :src="headImg.img" :style="previews.img">
                        </div>
                    </div>
                </Col>
            </Row>                           
        </Modal>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import city from '../../asset/js/city'
import { BaiduMap } from 'vue-baidu-map'
import VueCropper from 'vue-cropper'
import { createCustomer } from '../../api/customer';
export default {
    data() {
        return {
            checkboxture:1,
            checkboxfalse:0,
            nohead:true,            
            showinfo:false,
            area_data: city,
            showMap: false,
            BMap:{},
            map:{},
            customer:{
                
            },
            modalSearch: {},
            policyDetail: {

            },
            insertModal: false,
            insertType: 1,    //1:投保人，2：被保人 3：受益人
            insertinsuredIndex: 0,  //导入数据的被保人在数组中的下标
            insertBenefitIndex: 0,  //导入数据的受益人在数组中的下标
            ruleValidate: {
                num: [
                    { required: true, message: '保单编号不能为空', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '险种名称不能为空', trigger: 'blur' },
                ],
                cname: [
                    { required: true, message: '公司名称不能为空', trigger: 'change' }
                ],
                agent_code: [
                    { required: true, message: '投保人编号不能为空', trigger: 'change' }
                ],
                // pay_period: [
                //     { required: true, message: '缴费期间不能为空', trigger: 'change' }
                // ],
                start_date_format: [
                    { required: true, type: 'date', message: '生效日期不能为空', trigger: 'change' }
                ],
                // rate: [
                //     { required: true, message: '保费不能为空', trigger: 'change' }
                // ],
                // commission_rate: [
                //     { required: true, message: '佣金系数不能为空', trigger: 'change' }
                // ],
            },

            data_customer: [

            ],
            center: {
                lng: 116.404,
                lat: 39.915
            },
            address:'',
            loading: true,
            headImg: {
                    img: '',
                    info: true,
                    size: 1,
                    canScale:true,
                    outputType: 'jpeg',
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 200,
                    autoCropHeight: 200,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [1, 1],
                    demoimg:'',
            },
            modal2: false,
            previews: {},
        }
    },
    components: {
        productTitle,
        BaiduMap,
        VueCropper
    },
    created() {
        // this.getDetail();
    },
    mounted() {
        this.showMap = true;
    },
    methods: {
        idcardchange(event) {
            var _length = this.customer.id_card.length
            if( _length == 18){
                this.customer.solar_birthday = this.GetBirthday(this.customer.id_card)
                this.customer.solar = this.GetBirthday(this.customer.id_card)
                var _sex = this.Getsex(this.customer.id_card)+''
                this.$set(this.customer,'sex',_sex)
            }
        },
        baiduHandler({ BMap, map }) {
            // console.log(BMap)
            // console.log(map)
            this.BMap = BMap
            this.map = map
            // console.log(this.BMap)
            // console.log(this.map)
            // this.center.lng = this.customer.longitude
            // this.center.lat = this.customer.latitude
            this.center.lng = 113.636552
            this.center.lat = 34.767174 
        },

        mapclick(event) {
            var _lng_lat = event.point.lng+','+event.point.lat
            console.log(event.point.lng+','+event.point.lat)
            //this.customer.home_lng = _lng_lat
            this.$set(this.customer,'home_l',_lng_lat)
        },
        areaChange(value, selectedData){
            console.log(value)
            console.log(selectedData)
            var _areatxt = ''
            for(var i = 0,len = selectedData.length;i<len;i++){
                _areatxt += selectedData[i].label
            }
            console.log(_areatxt)
            this.address = _areatxt
            this.search_addr(_areatxt)
            this.customer.province = value[0]
            this.customer.city = value[1]
            this.customer.county = value[2]

        },
        addressChange() {
            var _address = this.address + this.customer.home_address
            console.log(_address)
            this.search_addr(_address)
        },
        search_addr(addr){	
            var BMap = 	this.BMap
            var map = this.map		
            var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map}
            });
            local.search(addr);
        },
        openinfobtn() {
            this.showinfo = true
        },
        closeinfo() {
            this.showinfo = false
        },
        getDetail() {
            if (this.$route.params.id != 0) {
                let _params = {
                    num: this.$route.params.id
                }
                new Promise((resolve, reject) => {
                    getPolicyDetail(_params).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.policyDetail = response.data.data;
                            this.policyDetail.inception_date_format = this.policyDetail.inception_date;
                            this.policyDetail.inception_date = new Date(this.policyDetail.inception_date)
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            }

        },
        //提交保存
        handleSubmit() {
            // this.$refs['customer'].validate((valid) => {
            //     if (valid) {
                    new Promise((resolve, reject) => {
                        createCustomer(this.customer).then(response => {
                            console.log(response.data)
                            if (response.data.err == 0) {
                                this.$router.push({ name: 'customer_list' })
                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
            //     }
            // });
        },
        // 监测datepicker的on-change时间，date为返回值，是格式化后的日期
        signDateChange(date) {
            this.customer.solar_birthday = date;
            this.customer.solar = date;
        },
        inceptionDateChange(date) {
            this.customer.true_birthday = date;
            this.customer.true_birthday_obj = date;
        },
        //----------------------------------------------------------
        //    功能：根据身份证号获得出生日期
        //  参数：身份证号 psidno
        //    返回值：
        //    出生日期
        //----------------------------------------------------------
        GetBirthday(psidno){
            var birthdayno,birthdaytemp
            if(psidno.length==18){
                birthdayno=psidno.substring(6,14)
            }else if(psidno.length==15){
                birthdaytemp=psidno.substring(6,12)
                birthdayno="19"+birthdaytemp
            }else{
                
                return false
            }
            var birthday=birthdayno.substring(0,4)+"-"+birthdayno.substring(4,6)+"-"+birthdayno.substring(6,8)
            return birthday    
        },
        //----------------------------------------------------------
        //    功能：根据身份证号获得性别
        //  参数：身份证号 psidno
        //    返回值：
        //    性别
        //----------------------------------------------------------
        Getsex(psidno){
            var sexno,sex
            if(psidno.length==18){
                sexno=psidno.substring(16,17)
            }else if(psidno.length==15){
                sexno=psidno.substring(14,15)
            }else{
                
                return false
            }
            var tempid=sexno%2;
            if(tempid==0){
                sex=2
            }else{
                sex=1
            }
            return sex
        },
        openModal(){
            this.modal2 = true   
        },
        uploadImg (e) {
            //上传图片
            // this.option.img
            var file = e.target.files[0]
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                return false
            }
            var reader = new FileReader()
            reader.onload = (e) => {
                this.headImg.img = e.target.result
            }
            reader.readAsDataURL(file)
        },
        // 实时预览函数
        realTime (data) {
            this.previews = data
        },
        finish2 (type) {
            
        },
        uploadHeadimg () {
            this.$refs.cropper.getCropData((data) => {               
                    //this.customer.avator = data
                    console.log(data)
                    this.$set(this.customer,"avator",data)  
                    this.nohead = false                             
            })
            
            this.modal2 = false;
            
        }
    }
}
</script>
